<template>
  <div class="goodsdetail-container">
    <!-- 商品轮播图 -->
    <div class="card">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ccc">
        <van-swipe-item v-for="item in thumbImages" :key="item.src">
          <img :src="item.src" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品名称 -->
    <div class="card">
      <div class="price">
        <span class="sellPrice">¥{{ goodsInfo.sell_price }}</span>
        <span class="shopPrice"
          ><s>¥{{ goodsInfo.market_price }}</s></span
        >
      </div>
      <div class="goodsName multi-ellipsis--l2">{{ goodsInfo.title }}</div>
    </div>

    <!-- 商品介绍 -->
    <div class="card">
      <van-divider content-position="left">介绍</van-divider>
      <div class="content" v-html="goodsInfo.content"></div>
    </div>

    <!-- 商品购买按钮 -->
    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/shopcar')"
        :badge="$store.getters.getCarNumber"
      />
      <van-goods-action-button type="warning" text="加入购物车" @click="goSku(true)" />
      <van-goods-action-button type="warning" text="立即购买" @click="goSku(false)" />
    </van-goods-action>

    <!-- 商品sku区域 -->
    <van-sku
      v-model="isShowSku"
      @add-cart="onAddCartClicked"
      @buy-clicked="onBuyClicked"
      :sku="sku"
      :goods="goods"
      :goods-id="id"
      :show-add-cart-btn="isSkuShowAddCart"
      :reset-stepper-on-hide="true"
      :hide-stock="false"
    >
      <template #sku-messages>
        <div class="card">
          <van-divider :hairline="false">其他信息</van-divider>
          <div class="info">
            <span>商品货号：{{ goodsInfo.goods_no }}</span>
            <span>库存情况：{{ goodsInfo.stock_quantity }}件</span>
            <span>上架时间：{{ $dateFormat(goodsInfo.add_time, 'YYYY-MM-DD') }}</span>
          </div>
        </div>
      </template>
    </van-sku>
  </div>
</template>

<script>
import { reqGoodsThumbImage, reqGoodsInfo } from '@/api'
import { reqAddHistory } from '@/api/user'

export default {
  data() {
    return {
      isShowSku: false,
      id: this.$route.params.id,
      thumbImages: [],
      isSkuShowAddCart: true,
      goodsInfo: {},
      sku: {
        // 数据结构见下方文档
        tree: [],
        price: '0.00', // 默认价格（单位元）
        stock_num: 0, // 商品总库存
      },
      goods: {
        picture: '',
      },
    }
  },
  methods: {
    onBuyClicked({ goodsId, selectedNum }) {
      let item = { id: goodsId, number: selectedNum, selected: true, price: this.goodsInfo.sell_price }
      this.$store.commit('addGoodsToCart', item)

      this.$router.push('/shopcar')
    },
    onAddCartClicked({ goodsId, selectedNum }) {
      // 构造购物车数据结构
      let item = { id: goodsId, number: selectedNum, selected: true, price: this.goodsInfo.sell_price }
      this.$store.commit('addGoodsToCart', item)
      // 隐藏sku弹框
      this.isShowSku = false
    },
    goSku(isSkuShowAddCart) {
      this.isShowSku = true
      this.isSkuShowAddCart = isSkuShowAddCart
    },
    async getGoodsThumbImage() {
      let { message } = await reqGoodsThumbImage(this.id)
      this.thumbImages = message
      this.goods.picture = message[0].src
    },
    async getGoodsInfo() {
      let { message } = await reqGoodsInfo(this.id)
      this.goodsInfo = message
      // 编写正则将width="750" width="750px"替换成空字符
      let reg = /width="\d+(px)?"/gi
      this.goodsInfo.content = this.goodsInfo.content.replace(reg, '')

      // 将img的高度替换成240px
      this.goodsInfo.content = this.goodsInfo.content.replace(/<img\s+height="\d+"\s+/gi, `<img height="240px" `)

      this.sku.price = message.sell_price
      this.sku.stock_num = message.stock_quantity
    },
  },
  async mounted() {
    this.getGoodsThumbImage()
    this.getGoodsInfo()

    // 用户若登录了，则将商品加入历史记录
    if (this.$store.state.token) {
      await reqAddHistory(this.id)
    }
  },
}
</script>

<style lang="scss" scoped>
$white: #fff;

.goodsdetail-container {
  font-size: 14px;
  color: #666;
  background-color: #eee9e9;

  .van-goods-action {
    max-width: 750px;
    margin: 0 auto;
  }

  .card {
    padding: 8px;
    margin: 8px;
    background: $white;
    border-radius: 6px;

    .van-swipe {
      height: 240px;
      background-color: $white;

      .van-swipe-item {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 245px;
          height: 100%;
        }
      }
    }

    .goodsName {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .price {
      .sellPrice {
        margin-right: 20px;
        font-size: 20px;
        color: #fa865d;
      }

      .shopPrice {
        color: #666;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      margin: 10px 0;
    }

    .content {
      ::v-deep img {
        width: 100%; // height: 240px;
      }
    }
  }
}
</style>
